// 横向渐变
.fade-transverse-leave-active,
.fade-transverse-enter-active {
  transition: all 0.5s;
}
.fade-transverse-enter {
  opacity: 0;
  transform: translateX(-30px);
}
.fade-transverse-leave-to {
  opacity: 0;
  transform: translateX(30px);
}

// 缩放渐变
.fade-scale-leave-active,
.fade-scale-enter-active {
  transition: all 0.3s;
}
.fade-scale-enter {
  opacity: 0;
  transform: scale(1.2);
}
.fade-scale-leave-to {
  opacity: 0;
  transform: scale(0.8);
}

// el-iamge-viewer使用的动画
// .viewer-fade-enter-active {
//   animation: viewer-fade-in 0.3s;
// }
//
// .viewer-fade-leave-active {
//   animation: viewer-fade-out 0.3s;
// }
//
// @keyframes viewer-fade-in {
//   0% {
//     transform: translate3d(0, -20px, 0);
//     opacity: 0;
//   }
//   100% {
//     transform: translate3d(0, 0, 0);
//     opacity: 1;
//   }
// }
//
// @keyframes viewer-fade-out {
//   0% {
//     transform: translate3d(0, 0, 0);
//     opacity: 1;
//   }
//   100% {
//     transform: translate3d(0, -20px, 0);
//     opacity: 0;
//   }
// }
